<!DOCTYPE html>
<html>

<head>
	<title></title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="../../element-ui-2.13.0/lib/theme-chalk/index.css" />
	<script type="text/javascript" src="../../vue/vue-v2.6.10.js"></script>
	<script type="text/javascript" src="../../element-ui-2.13.0/lib/index.js"></script>
	<script type="text/javascript" src="../../vue/axios-0.18.0.js"></script>
</head>

<body>
	<div id="app">
		<el-tag type="info" effect="dark" v-if="inputVisible" closable="true" :disable-transitions="disable"
			@close="handleClose">用户管理</el-tag>
		<div v-if="inputVisible">
			<template>
				<el-table :data="tableData" @selection-change="handleSelectionChange" size="medium"
					highlight-current-row="true" style="width: 100%">
					<el-table-column type="selection" width="55" prop="uid">
					</el-table-column>
					<el-table-column width="100px" label="序号" type="index">
					</el-table-column>
					<el-table-column label="用户账号" prop="username">
					</el-table-column>
					<el-table-column label="真实姓名" prop="name">
					</el-table-column>
					<el-table-column label="角色" prop="role">
						<template slot-scope="{row}">
							<span v-if="row.role==1">管理员</span>
							<span v-if="row.role==2">总经理</span>
							<span v-if="row.role==3">员工</span>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
							<el-button size="mini" type="danger" @click="handlelook(scope.$index, scope.row)">详情
							</el-button>
						</template>
					</el-table-column>
					<el-table-column align="left" width="200px">
						<template slot="header" slot-scope="scope">
							<el-input v-model="search" size="mini" @input="handleSearchChange" placeholder="输入用户名称搜索" />
						</template>
					</el-table-column>
				</el-table>
			</template>
			<br />
			<el-row>
				<el-button type="warning" @click="delAll()">删除选中</el-button>
				<el-button type="primary"><a href="addUser.html" target="main"
						style="text-decoration: none;color:white">添加用户</a></el-button>
			</el-row>
			<template>
				<div class="block" align="right">
					<el-pagination @size-change="handleSizeChange" :slot="tableData"
						@current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[3, 4, 5, 6]"
						:page-size="pageSize" layout="total, sizes, prev, pager, next, jumper, slot"
						:total="totalCount">
					</el-pagination>
				</div>
			</template>
		</div>

		<!-- 	修改 -->
		<el-dialog title="修改用户" :visible.sync="dialogVisible" :close-on-click-modal="false" width="30%">

			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="登录名" prop="username">
					<el-input v-model="ruleForm.username" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="ruleForm.password" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="真实姓名" prop="name">
					<el-input v-model="ruleForm.name" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="手机号码" prop="phone">
					<el-input v-model="ruleForm.phone" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="年龄" prop="age">
					<el-input v-model.number="ruleForm.age" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="性別" prop="sex">
					<el-radio-group v-model="ruleForm.sex">
						<el-radio :label="0">男</el-radio>
						<el-radio :label="1">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="ruleForm.status">
						<el-radio :label="1">启用</el-radio>
						<el-radio :label="2">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="角色" prop="role">
					<el-select v-model="ruleForm.role" placeholder="请选择活动区域">
						<el-option label="管理员" :value="1"></el-option>
						<el-option label="总经理" :value="2"></el-option>
						<el-option label="用户" :value="3"></el-option>
					</el-select>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 详情 -->
		<el-dialog title="用户信息" :visible.sync="dialogVisible1" :close-on-click-modal="false" width="30%">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="登录名" prop="username">
					<el-input v-model="ruleForm.username" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="ruleForm.password" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="真实姓名" prop="name">
					<el-input v-model="ruleForm.name" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="手机号码" prop="phone">
					<el-input v-model="ruleForm.phone" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="年龄" prop="age">
					<el-input v-model.number="ruleForm.age" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="性別" prop="sex">
					<el-radio-group v-model="ruleForm.sex">
						<el-radio :label="0">男</el-radio>
						<el-radio :label="1">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="ruleForm.status">
						<el-radio :label="1">启用</el-radio>
						<el-radio :label="2">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="角色" prop="role">
					<el-select v-model="ruleForm.role" placeholder="请选择活动区域">
						<el-option label="管理员" :value="1"></el-option>
						<el-option label="总经理" :value="2"></el-option>
						<el-option label="用户" :value="3"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="创建时间">
					<el-col>
						<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.createtime"
							style="width:215px;">
						</el-date-picker>
					</el-col>
				</el-form-item>
			</el-form>


		</el-dialog>
	</div>
</body>
<script>
	axios.defaults.withCredentials = true
	new Vue({
		el: "#app",
		data: {
			/*分页相关*/
			tableData: [],//当前页要展示的分页列表数据
			search: '',//查询条件
			pageSize: 3,//每页显示的记录数
			currentPage: 1,//当前页码
			totalCount: '',//总记录数
			/*批量删除*/
			multipleSelection: [],//批量删除存放选中的复选框
			delarr: [], //存放删除的数据
			/*选项卡*/
			inputVisible: true,
			disable: false,
			/* 对话框 */
			dialogVisible: false,
			dialogVisible1: false,
			ruleForm: {
				uid: '',
				username: '',
				password: '',
				name: '',
				phone: '',
				status: '',
				role: '',
				age: '',
				sex: '',
				createtime: ''
			},
			rules: {
				username: [
					{ required: true, message: '请输入用户名称', trigger: 'blur' },
					{ min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				],
				role: [
					{ required: true, message: '请选择角色', trigger: 'change' }
				],
				name: [
					{ required: true, message: '请输入真实姓名', trigger: 'blur' }
				],
				phone: [
					{
						required: true,
						message: '请输入手机号码',
						trigger: 'blur'
					},
					{
						validator: function (rule, value, callback) {
							if (/^1[34578]\d{9}$/.test(value) == false) {
								callback(new Error("请输入正确的手机号"));
							} else {
								callback();
							}
						}, trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}, {
						min: 6,
						max: 30,
						message: '长度在 6 到 30 个字符'
					}, {
						pattern: /^(\w){6,20}$/,
						message: '只能输入6-20个字母、数字、下划线'
					}
				],
				status: [
					{ required: true, message: '请选择状态', trigger: 'change' }
				],
				sex: [
					{ required: true, message: '请选择性別', trigger: 'change' }
				],
				age: [
					{ required: true, message: '年龄不能为空', trigger: 'blur' },
					{
						validator: function (rule, value, callback) {
							if (!Number.isInteger(value)) {
								callback(new Error('请输入数字值'));
							} else {
								if (value < 18) {
									callback(new Error('必须年满18岁'));
								} else {
									callback();
								}
							}
						}, trigger: 'blur'
					}
				],
				createtime: [
					{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
				],
			},
		},
		methods: {
			
			handleClose() {
				this.inputVisible = false;
			},
			/* 修改回显用户信息 */
			handleEdit(index, row) {
				let r = {...row};//将row的属性给r，而不是引用
				this.ruleForm = r;
				this.dialogVisible = true;
			},
		
			handlelook(index, row) {
				let r = {...row};
				this.ruleForm = r;
				this.dialogVisible1 = true;
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			
			delAll() {
				let params = new URLSearchParams();
				for(let i of this.multipleSelection){
					params.append("uid",i.uid);
				}
				this.$confirm("确认删除当前选中的记录吗?", "提示", { type: 'warning' }).then(() => {
					axios.post('http://localhost/user?method=batchDel',params).then(resp=>{
					if(resp.data.code==200){
						this.$message.success(resp.data.message);
						this.currentPage = 1;
						this.findByPage();
					}else{
						this.$message.warning(resp.data.message);
						}
					});	
			  	}).catch(() => {
                    this.$message.warning("删除操作已撤销");
                });
			},
		
			handleSizeChange: function (size) {
				this.pageSize = size;
				this.findByPage();
			},
			
			handleCurrentChange: function (currentPage) {
				this.currentPage = currentPage;
				this.findByPage();
			},

			handleSearchChange(){
				this.currentPage = 1;
				this.findByPage();
			},

			findByPage() {
				let params = new URLSearchParams();
				params.append("search",this.search);
				params.append("currentPage",this.currentPage);
				params.append("pageSize",this.pageSize);
				axios.post('http://localhost/user?method=findByPage',params).then(resp=>{
					console.log(resp);
					this.tableData = resp.data.data.pageData;
					this.totalCount = resp.data.data.total;
				});
			},
		
			/* 更新用户 */
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
        		if (valid) {
					//符合校验规则提交表单
					//关闭对话框
					this.dialogVisible=false
					//使用URLSearchParams来处理参数 以键值对形式发送数据
					let params = new URLSearchParams();
					for(let i in this.ruleForm){
						params.append(i,this.ruleForm[i]);
					}
					axios({
						method: "post",
						url: "http://localhost/user?method=updateUser",
						headers: {
							"content-Type": "application/x-www-form-urlencoded"
						},
                		data: params
					}).then((resp) => {
					if (resp.data.code == 200) {
							this.$message.success(resp.data.message);
						}else{
							this.$message.warning(resp.data.message);
						}
               		 //1秒后跳转到用户管理的index
							window.setTimeout("window.location='index.html'",1000);
						});
					} else {
							this.$message({
								message: '表单校验未通过',
								type: 'warning'
							});
						return false;
					}
				});
			},
		
			resetForm(formName) {
				// this.$refs[formName].resetFields();
			}

		},
		created() {
			this.findByPage();
		},

	})
</script>

</html>